<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>量表预览 - {{ scale.title }}</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <style>
        .preview-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
        }
        .question-card {
            border-left: 4px solid #007bff;
            margin-bottom: 1.5rem;
        }
        .option-item {
            padding: 0.5rem;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .option-item:hover {
            background-color: #f8f9fa;
            border-color: #007bff;
        }
        .option-item.selected {
            background-color: #e3f2fd;
            border-color: #007bff;
        }
        .preview-footer {
            background-color: #f8f9fa;
            padding: 2rem 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 预览头部 -->
    <div class="preview-header">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h1>{{ scale.title }}</h1>
                    {% if scale.subtitle %}
                    <p class="lead">{{ scale.subtitle }}</p>
                    {% endif %}
                    <div class="badge bg-warning text-dark">预览模式</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 量表信息 -->
    <div class="container mt-4">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                {% if scale.description %}
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-info-circle me-2"></i>量表说明</h5>
                        <p class="card-text">{{ scale.description }}</p>
                    </div>
                </div>
                {% endif %}

                {% if scale.instruction %}
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-list-check me-2"></i>测试说明</h5>
                        <p class="card-text">{{ scale.instruction }}</p>
                    </div>
                </div>
                {% endif %}

                <!-- 题目区域 -->
                <div id="questionsArea">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2 text-muted">正在加载题目...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 预览底部 -->
    <div class="preview-footer mt-5">
        <div class="container">
            <p class="text-muted mb-2">这是量表预览模式，实际测试请前往正式页面</p>
            <button class="btn btn-secondary" onclick="window.close()">
                <i class="bi bi-x-circle me-1"></i>关闭预览
            </button>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            loadQuestions();
        });

        function loadQuestions() {
            const scaleId = {{ scale.id | tojson }};
            
            fetch(`/api/admin/scales/${scaleId}`, {
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('adminToken')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    renderQuestions(data.data.questions);
                } else {
                    showError('加载题目失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('加载题目失败:', error);
                showError('加载题目失败，请稍后重试');
            });
        }

        function renderQuestions(questions) {
            const questionsArea = document.getElementById('questionsArea');
            
            if (!questions || questions.length === 0) {
                questionsArea.innerHTML = `
                    <div class="text-center py-5">
                        <i class="bi bi-exclamation-circle fs-1 text-muted"></i>
                        <p class="mt-2 text-muted">暂无题目</p>
                    </div>
                `;
                return;
            }

            const questionsHTML = questions.map((question, index) => `
                <div class="card question-card">
                    <div class="card-body">
                        <h5 class="card-title">
                            <span class="badge bg-primary me-2">${question.question_number || index + 1}</span>
                            ${question.question_text}
                            ${question.is_required ? '<span class="badge bg-warning ms-2">必答</span>' : ''}
                        </h5>
                        
                        ${question.question_type !== 'text' ? `
                            <div class="options mt-3">
                                ${question.options.map(option => `
                                    <div class="option-item" onclick="selectOption(this, '${question.question_type}')">
                                        <label class="form-check-label w-100">
                                            <input type="${question.question_type === 'multiple' ? 'checkbox' : 'radio'}" 
                                                   name="question_${question.id}" 
                                                   value="${option.option_value}"
                                                   class="form-check-input me-2">
                                            <strong>${option.option_key}.</strong> ${option.option_text}
                                            ${option.option_value ? `<span class="badge bg-secondary ms-2">${option.option_value}分</span>` : ''}
                                        </label>
                                    </div>
                                `).join('')}
                            </div>
                        ` : `
                            <div class="mt-3">
                                <textarea class="form-control" rows="3" placeholder="请输入您的答案..." readonly></textarea>
                            </div>
                        `}
                    </div>
                </div>
            `).join('');

            questionsArea.innerHTML = questionsHTML;
        }

        function selectOption(element, questionType) {
            if (questionType === 'multiple') {
                element.classList.toggle('selected');
            } else {
                // 单选题：清除同组其他选项的选中状态
                const siblings = element.parentNode.querySelectorAll('.option-item');
                siblings.forEach(sibling => sibling.classList.remove('selected'));
                element.classList.add('selected');
            }
        }

        function showError(message) {
            document.getElementById('questionsArea').innerHTML = `
                <div class="text-center py-5">
                    <i class="bi bi-exclamation-triangle fs-1 text-danger"></i>
                    <p class="mt-2 text-danger">${message}</p>
                </div>
            `;
        }
    </script>
</body>
</html> 